<template>
  <view class="integralBox">
    <view
      class="head"
      :style="[
        {
          backgroundImage: 'url(' + asyncImgs.integral.store_bg + ')'
        }
      ]"
    >
      <pageHeader :title="stores.integral_name"></pageHeader>
      <view class="integralInfo">
        <text class="title">我的{{ stores.integral_name }}</text>
        <text class="count">{{ integralInfo.integral || 0 }}</text>
        <view
          class="record"
          @click="
            $utils.toUrl('/integral/integral/myIntegralDetail', 'navigate')
          "
        >
          <text>{{ stores.integral_name }}记录</text>
          <text class="iconfont icon-arrow-right-filling"></text>
        </view>
        <view
          class="exchange"
          @click="$utils.toUrl('/integral/integralStore/record', 'navigate')"
        >
          <text class="iconfont icon-gift"></text>
          <text>我的兑换</text>
        </view>
      </view>
      <view class="taskBox">
        <view class="title">
          <text>做任务赚{{ stores.integral_name }}</text>
          <view class="explain" @click="toExplain">
            <text>{{ stores.integral_name }}说明</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        <view class="taskList">
          <view class="taskItem">
            <view class="taskInfo">
              <image class="pic" :src="asyncImgs.integral.icon1"></image>
              <view class="info">
                <text>{{ stores.integral_name }}签到</text>
                <text>100%中奖，还不快来</text>
              </view>
            </view>
            <text class="btn" @click="$utils.toUrl('/integral/signIn/signIn')"
              >去完成</text
            >
          </view>
          <view class="taskItem">
            <view class="taskInfo">
              <image class="pic" :src="asyncImgs.integral.icon2"></image>
              <view class="info">
                <text>消费返{{ stores.integral_name }}</text>
                <text>消费即得{{ stores.integral_name }}</text>
              </view>
            </view>
            <text
              class="btn"
              @click="$utils.toUrl('/pages/home/home', 'switchtab')"
              >去消费</text
            >
          </view>
        </view>
      </view>
    </view>
    <view style="margin-top: 252rpx">
      <view
        class="swiper"
        v-if="integralInfo.polling && integralInfo.polling.length"
      >
        <u-swiper :list="integralInfo.polling" height="172"></u-swiper>
      </view>
      <u-sticky
        :offset-top="stickyOffTop"
        :h5-nav-height="0"
        bgColor=""
        @fixed="queryFixed = true"
        @unfixed="queryFixed = false"
      >
        <view
          class="queryOption"
          :style="[{ backgroundColor: queryFixed ? '#fff' : '' }]"
        >
          <scroll-view
            scroll-x
            class="catBox"
            :scroll-into-view="intoCat"
            enable-flex
            scroll-with-animation
            v-if="catList.length"
          >
            <view
              :class="['catItem', currentCat == item.id ? 'current' : '']"
              @click="changeCat(item.id, false)"
              :id="'cat' + item.id"
              v-for="item in catList"
              :key="item.id"
              >{{ item.name }}</view
            >
          </scroll-view>
          <scroll-view
            scroll-x
            class="countBox"
            :scroll-into-view="intoCount"
            enable-flex
            scroll-with-animation
          >
            <view
              :class="['catItem', currentCount == index ? 'current' : '']"
              :style="[{ backgroundColor: queryFixed ? '#f2f2f2' : '#fff' }]"
              @click="changeCcount(index)"
              :id="'count' + index"
              v-for="(item, index) in countList"
              :key="index"
              >{{ item }}</view
            >
          </scroll-view>
        </view>
      </u-sticky>
      <view class="goodsList">
        <view
          class="goodItem"
          v-for="item in goodsList"
          :key="item.id"
          @click="
            $utils.toUrl(
              '/integral/integralStore/goods?id=' + item.id,
              'navigate'
            )
          "
        >
          <view class="pic">
            <image :src="item.cover_pic" mode="aspectFill" />
          </view>
          <view class="goodInfo">
            <text class="name">{{ item.name }}</text>
            <!-- <view class="price" v-if="!item.price || item.price <= 0">
              <text>{{ item.integral_price }}{{ stores.integral_name }}</text>
              <text>￥{{ item.original_price }}</text>
            </view> -->
            <view class="priceColumn">
              <text
                >{{
                  item.integral_price && item.integral_price > 0
                    ? `${item.integral_price + stores.integral_name}`
                    : ""
                }}{{ item.integral_price > 0 && item.price > 0 ? "+" : ""
                }}{{
                  item.price && item.price > 0 ? `${item.price}元` : ""
                }}</text
              >
              <text>￥{{ item.original_price }}</text>
            </view>
            <text class="count">已兑{{ item.virtual_sales }}</text>
          </view>
        </view>
        <view class="noMore" v-if="noMore">没有更多了~</view>
      </view>
    </view>
  </view>
</template>

<script>
import pageHeader from "./components/pageHeader.vue";
export default {
  components: {
    pageHeader
  },
  data() {
    return {
      // 当前搜索条件
      currentCat: "",
      currentCount: "0",
      // 滑动条要跳转的地方
      intoCat: "",
      intoCount: "",
      // 查询条件是否吸顶
      queryFixed: false,

      // 分类选项
      catList: [],
      // 积分商城配置
      integralInfo: {
        polling: [],
        explain: "",
        integral: 0
      },
      // 当前加载商品页码
      page: 1,
      // 是否加载完毕
      noMore: false,
      // 商品列表
      goodsList: []
    };
  },
  computed: {
    stickyOffTop() {
      let top = 0;
      top = this.statusBarHeight * 2 + 88 - 4;
      return top.toString();
    },
    // 积分选项
    countList() {
      if (this.stores) {
        return [
          "全部",
          "1-100" + this.stores.integral_name,
          "101-500" + this.stores.integral_name,
          "501-1000" + this.stores.integral_name,
          `1001${this.stores.integral_name}及以上`
        ];
      }
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: `${this.stores.integral_name}商城`
    });
  },
  onShow() {
    this.noMore = false;
    this.goodsList = [];
    this.page = 1;
    this.getIntegralInfo();
  },
  methods: {
    // 切换分类
    changeCat(e, flag = false) {
      if (this.currentCat == e && !flag) {
        return;
      }
      this.currentCat = e;
      let index = this.catList.findIndex((item) => {
        return item.id == e;
      });
      if (index >= 1) {
        this.intoCat = "cat" + this.catList[index - 1].id;
      } else {
        this.intoCat = "cat" + e;
      }
      this.noMore = false;
      this.goodsList = [];
      this.page = 1;
      this.getGoodsList();
    },
    // 切换积分数量
    changeCcount(e) {
      if (this.currentCount == e) {
        return;
      }
      this.currentCount = e;
      if (e >= 1) {
        this.intoCount = "count" + (e - 1);
      } else {
        this.intoCount = "count" + e;
      }
      this.noMore = false;
      this.goodsList = [];
      this.page = 1;
      this.getGoodsList();
    },
    // 跳转积分设置
    toExplain() {
      let param = {
        title: `${this.stores.integral_name}说明`,
        content: this.integralInfo.explain
      };
      uni.setStorageSync("richTextData", param);
      uni.navigateTo({
        url: "/integral/integralStore/explain"
      });
    },
    // 获取积分商城配置
    async getIntegralInfo() {
      const res = await this.$allrequest.integral.integralInfo();
      if (res.code == 0 && res.data) {
        this.integralInfo.polling = res.data.polling;
        this.integralInfo.explain = res.data.explain;
        this.integralInfo.integral = res.data.integral;
        if (res.data.catInfo && res.data.catInfo.length) {
          this.catList = res.data.catInfo;
          this.changeCat(res.data.catInfo[0].id, true);
        } else {
          this.getGoodsList();
        }
      }
    },
    // 获取商品列表
    async getGoodsList() {
      let param = {
        level: this.currentCount,
        page: this.page
      };
      if (this.currentCat) {
        param.cat_id = this.currentCat;
      }
      const res = await this.$allrequest.integral.getGoodsList(param);
      if (res.code == 0) {
        this.goodsList = [...this.goodsList, ...res.data.data];
        if (res.data.data.length) {
          this.page = this.page + 1;
        }
        if (this.goodsList.length >= res.data.totalCount) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    }
  },
  onReachBottom() {
    if (this.noMore) {
      return;
    }

    this.getGoodsList();
  }
};
</script>

<style lang="scss" scoped>
.integralBox {
  min-height: 100vh;
  font-family: PingFang SC;
  background-color: #f2f2f2;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .head {
    width: 750rpx;
    height: 534rpx;
    background-size: 100% 100%;
    background-position: 0 0;
    .integralInfo {
      width: 100%;
      padding-top: 24rpx;
      padding-left: 48rpx;
      display: flex;
      position: relative;
      flex-direction: column;
      color: #fff;
      .title {
        font-size: 30rpx;
        font-weight: 600;
      }
      .count {
        font-size: 88rpx;
        font-weight: 600;
      }
      .record {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .iconfont {
          font-size: 24rpx;
        }
      }
      .exchange {
        position: absolute;
        right: 0;
        width: 168rpx;
        height: 62rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 120rpx 0 0 120rpx;
        background: #fff;
        opacity: 0.8;
        color: #ff690b;
        font-weight: 600;
        .iconfont {
          font-size: 36rpx;
          font-weight: normal;
          margin-right: 6rpx;
        }
      }
    }
    .taskBox {
      position: absolute;
      left: 24rpx;
      top: 426rpx;
      width: 702rpx;
      padding: 0 24rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .title {
        padding-top: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30rpx;
        color: #262626;
        font-weight: 600;
        .explain {
          font-size: 24rpx;
          color: #8c8c8c;
          display: flex;
          align-items: center;
          font-weight: normal;
          .iconfont {
            font-size: 24rpx;
            transform: scale(0.7);
          }
        }
      }
      .taskList {
        padding: 24rpx 0;
        .taskItem {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .taskInfo {
            display: flex;
            .pic {
              width: 84rpx;
              min-width: 84rpx;
              height: 84rpx;
            }
            .info {
              margin-left: 20rpx;
              display: flex;
              flex-direction: column;
              text:nth-child(1) {
                font-size: 28rpx;
                color: #262626;
                font-weight: 600;
              }
              text:nth-child(2) {
                font-size: 24rpx;
                color: #8c8c8c;
                margin-top: 6rpx;
              }
            }
          }
          .btn {
            width: 136rpx;
            height: 56rpx;
            border-radius: 99px;
            font-size: 26rpx;
            color: #fff;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(93deg, #ff5d3b 0%, #ff382e 100%);
          }
        }
        .taskItem:last-child {
          margin-top: 48rpx;
        }
      }
    }
  }
  .line {
    width: 100%;
    height: 1px;
    margin-top: 252rpx;
  }
  .swiper {
    margin: 0 auto;
    width: 702rpx;
    height: 172rpx;
    background-color: #a36767;
    border-radius: 20rpx;
  }
  .queryOption {
    width: 100%;
    padding: 12rpx 28rpx;
    .catBox {
      width: 100%;
      display: flex;
      height: 60rpx;
      box-sizing: border-box;
      .catItem {
        position: relative;
        white-space: nowrap;
        margin-right: 44rpx;
        font-size: 32rpx;
        color: #262626;
        height: 100%;
      }
      .current {
        position: relative;
        font-weight: 600;
      }
      .current::before {
        content: "";
        position: absolute;
        height: 8rpx;
        width: 60%;
        left: 50%;
        bottom: 0rpx;
        background-color: #f0250e;
        border-radius: 99px;
        transform: translateX(-50%);
      }
    }
    .countBox {
      margin-top: 12rpx;
      width: 100%;
      display: flex;
      height: 60rpx;
      .catItem {
        height: 60rpx;
        padding: 0 24rpx;
        white-space: nowrap;
        margin-right: 16rpx;
        font-size: 24rpx;
        color: #262626;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .current {
        font-weight: 600;
        color: #f0250e;
      }
    }
  }
  .goodsList {
    margin-top: 12rpx;
    padding: 0 24rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goodItem {
      width: 344rpx;
      margin-bottom: 14rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #fff;
      .pic {
        width: 100%;
        height: 344rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .goodInfo {
        padding: 8rpx 16rpx 24rpx;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 28rpx;
          color: #1d1d1d;
          font-weight: 600;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .price {
          display: flex;
          align-items: baseline;
          margin-top: 12rpx;
          text:nth-child(1) {
            color: #fa2c1b;
            font-size: 32rpx;
            font-weight: 600;
          }
          text:nth-child(2) {
            color: #9b9b9b;
            font-size: 24rpx;
            text-decoration: line-through;
          }
        }
        .priceColumn {
          display: flex;
          flex-direction: column;
          margin-top: 12rpx;
          text:nth-child(1) {
            color: #fa2c1b;
            font-size: 32rpx;
            font-weight: 600;
          }
          text:nth-child(2) {
            color: #9b9b9b;
            font-size: 24rpx;
            text-decoration: line-through;
            margin-top: 2rpx;
          }
        }
        .count {
          font-size: 24rpx;
          color: #9b9b9b;
        }
      }
    }
  }
  .noMore {
    width: 100%;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #c1c1c1;
  }
}
</style>
